<%--
  Created by IntelliJ IDEA.
  User: 棠棣
  Date: 2021/10/31
  Time: 14:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="StyleSheet" href="css/jpetstore.css" type="text/css" media="screen" />
    <%--添加搜索样式--%>
    <link rel="StyleSheet" href="css/searchProduct.css" type="text/css" media="screen"/>
    <link rel="StyleSheet" href="css/mouseEventInform.css" type="text/css" media="screen"/>
    <style type="text/css">
        #birds{
            position: absolute;
            top: 20px;
            width: 100px;
            max-height: 250px;           /* 设置最大高度，当高度达到此值时出现滚动条 */
            z-index: 10;
            background-color: #E0E5E5;
            overflow: auto;              /* 自动添加滚动条 */
            box-shadow:0px 0px 10px #000;   /* 外阴影 */
            display: none;   /* 默认隐藏 */
        }

        #inform{
            position: fixed;
            left:900px;
            width: 350px;
            max-height: 350px;           /* 设置最大高度，当高度达到此值时出现滚动条 */
            z-index: 10;
            background-color: #E0E5E5;
            word-wrap: break-word;
            box-shadow:0px 0px 10px #000;   /* 外阴影 */
            display: none;   /* 默认隐藏 */
        }
        #inform hr{
            border:1px;
            width: 325px;
            margin-bottom: 0px;
        }
    </style>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>MyPetStore</title>
    <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <%--引入js--%>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="Header">

    <div id="Logo">
        <div id="LogoContent">
            <a href="main"><img src="images/logo-topbar.gif" /></a>
        </div>
    </div>

    <div id="Menu">
        <div id="MenuContent">
            <a href="viewCart">
                <img align="middle" name="img_cart" src="images/cart.gif" /></a> <img align="middle"
                                                                               src="images/separator.gif" /> <a
                href="signOn">Sign In</a> <a href="signOut">Sign
            Out</a> <img align="middle" src="images/separator.gif" /> <a
                href="updateAccount">My Account</a> <img align="middle"
                                             src="images/separator.gif" /> <a href="../help.html">?</a>
            <p>${sessionScope.error}</p>
        </div>
    </div>
<%--增加搜索联想功能--%>
    <div id="Search">
        <div id="SearchContent">
            <form action="search" method="post">
                <input type="text" id="keyword" name="keyword" size="14" autocomplete="off"/>
                <div class="auto hidden" id="auto">
                    <div class="auto_out">1</div>
                    <div class="auto_out">2</div>
                </div>
                <input type="submit" name="searchProducts" value="Search" />
                <script src="js/searchProduct.js"></script>
                <%--<a href="search"  ><input type="submit" name="searchProducts" value="Search" /></a>--%>
            </form>
        </div>
    </div>


    <div id="QuickLinks">
        <a href="viewCategory?categoryId=FISH"><img
                src="images/sm_fish.gif" /></a> <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=DOGS"><img
                src="images/sm_dogs.gif" /></a> <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=REPTILES"><img
                src="images/sm_reptiles.gif" /></a> <img
            src="images/separator.gif" /> <a href="viewCategory?categoryId=CATS"><img
            src="images/sm_cats.gif" /></a> <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=BIRDS"><img
                src="images/sm_birds.gif" /></a>
    </div>

</div>

<div id="Content">